<!--
 * @Description: 个人中心
 * @Author: wrysunny
 * @Date: 2024-11-18 18:25:42
 * @LastEditor: wrysunny
 * @LastEditTime: 2024-12-11 15:11:20
-->
<template>
	<view class="min-h-[100vh] bg-background pb-[calc(var(--window-bottom))]">
		<!-- <up-navbar bg-color="rgba(0,0,0,0)" placeholder @leftClick="sacn">
			<template #left>
				<up-icon name="scan" size="60rpx"></up-icon>
			</template>
		</up-navbar> -->
		<view style="padding: 30rpx">
			<view class="flex items-center justify-between">
				<up-avatar :src="$setBaseUrl(store.userInfo.avatar)" size="160rpx"></up-avatar>
				<view class="flex-1 ml-[20rpx]">
					<view class="leading-[60rpx] text-[36rpx] font-bold">{{ store.userInfo.nickName || '未登录' }}</view>
					<view class="text-[24rpx] text-gray">{{ store.userInfo.nickTitle || '暂未填写' }}</view>
				</view>
				<view class="flex">
					<view class="mr-[24rpx] relative">
						<up-icon name="bell" size="60rpx" @click="toMessage"></up-icon>
						<view class="absolute top-[5rpx] right-[10rpx] w-[12rpx] h-[12rpx] rounded-full bg-[#ff0000]" v-if="store.userInfo.notifyCount"></view>
					</view>
					<view class="">
						<up-icon name="setting" size="60rpx" @click="toSetting"></up-icon>
					</view>
				</view>
			</view>
			<view class="h-[98rpx] flex items-center justify-between text-center mt-[40rpx]">
				<view class="basis-[168rpx]">
					<view class="text-[36rpx] font-[500]">{{ store.userInfo.point || 0 }}</view>
					<view class="text-[24rpx] text-gray">积分</view>
				</view>
				<view class="basis-[168rpx]" @click="toCollect">
					<view class="text-[36rpx] font-[500]">{{ store.userInfo.collectionCount || 0 }}</view>
					<view class="text-[24rpx] text-gray">收藏</view>
				</view>
				<view class="basis-[168rpx]" @click="toCoupon">
					<view class="text-[36rpx] font-[500]">{{ store.userInfo.couponCount || 0 }}</view>
					<view class="text-[24rpx] text-gray">优惠卷</view>
				</view>
			</view>
			<view class="p-[30rpx] border border-[#fff] rounded-[16rpx] mt-[30rpx]" :style="store.memberInfo.style">
				<view class="flex items-center justify-between">
					<view class="text-[32rpx]">
						<text>Lv.{{ store.memberInfo.userLevel }}</text>
						<text class="ml-[10rpx]">{{ store.memberInfo.text }}</text>
					</view>
					<view
						class="equity"
						:style="{
							borderColor: store.memberInfo.style?.color
						}"
						@click.stop="toMember"
					>
						我的权益
					</view>
				</view>
				<view class="my-[20rpx]">
					<up-line-progress
						:percentage="store.memberInfo.point / store.memberInfo.next?.totalPoint"
						:activeColor="store.memberInfo.style?.activeColor"
						:inactiveColor="store.memberInfo.style?.inactiveColor"
						height="4rpx"
						:showText="false"
					></up-line-progress>
				</view>
				<view class="flex items-center justify-between">
					<view class="flex items-center">
						<up-icon name="integral" size="28rpx" :color="store.memberInfo.style?.color"></up-icon>
						<text class="text-[24rpx]">{{ store.memberInfo.point }} / {{ store.memberInfo.next?.totalPoint }}</text>
					</view>
					<view class="text-[22rpx]" v-if="store.memberInfo.next?.level !== store.memberInfo.userLevel">
						升级至{{ store.memberInfo.next?.text }}后额外解锁 {{ store.memberInfo.next?.equity }} 项特权
					</view>
					<view class="text-[22rpx]" v-else>您已是最高等级会员</view>
				</view>
			</view>
			<view class="bg-white rounded-[16rpx] py-[30rpx] mt-[26rpx]">
				<view class="flex items-center justify-between px-[30rpx]">
					<view class="text-[32rpx]">我的订单</view>
					<!-- <view class="text-[28rpx] flex items-center">
						<view class="leading-none">全部</view>
						<up-icon name="arrow-right" size="30rpx"></up-icon>
					</view> -->
				</view>
				<view class="flex justify-between mt-[24rpx]">
					<view class="flex-1 flex items-center justify-center flex-col" v-for="item in myOrderMenu" :key="item.icon" @click="item.click">
						<up-image :src="item.icon" width="60rpx" height="60rpx"></up-image>
						<view class="text-[24rpx] mt-[10rpx]">{{ item.text }}</view>
					</view>
				</view>
			</view>
			<view class="bg-white rounded-[16rpx] py-[30rpx] mt-[26rpx]">
				<view class="flex items-center justify-between px-[30rpx]">
					<view class="text-[32rpx]">更多服务</view>
				</view>
				<view class="flex justify-between mt-[24rpx]">
					<button
						class="flex-1 flex items-center justify-center flex-col u-reset-button"
						:open-type="item.open_type"
						v-for="item in moreServices"
						:key="item.icon"
						@click="item.click"
					>
						<up-image :src="item.icon" width="60rpx" height="60rpx"></up-image>
						<view class="text-[24rpx] mt-[10rpx]">{{ item.text }}</view>
					</button>
				</view>
			</view>
		</view>
		<GlobalLoginDialog></GlobalLoginDialog>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';

import beverageOrder from '@/static/myOrderMenu/beverageOrder.png';
import groupPurchaseOrder from '@/static/myOrderMenu/groupPurchaseOrder.png';
import mallOrder from '@/static/myOrderMenu/mallOrder.png';
import receivingHall from '@/static/moreServices/receivingHall.png';
import distributionCenter from '@/static/moreServices/distributionCenter.png';
import onlineCustomerService from '@/static/moreServices/onlineCustomerService.png';
import couponCollectionCenter from '@/static/moreServices/couponCenter.png';

import useUserInfo from '@/hooks/useUserInfo';
import { useLoginStore } from '@/store/login';
import utils from '@/utils/utils';
import useMember from '@/hooks/useMember';
onShow(() => {
	if (uni.getStorageSync('token')) {
		getUserInfoFn();
		getUserMemberInfo();
	}
});
const store = useLoginStore();
const { getUserInfoFn } = useUserInfo();
const { getUserMemberInfo } = useMember();
const orderMenu = reactive([
	{
		icon: 'due',
		text: '待付款'
	},
	{
		icon: 'production',
		text: '制作中'
	},
	{
		icon: 'completed',
		text: '已完成'
	},
	{
		icon: 'cancelled',
		text: '已取消'
	}
]);
const myOrderMenu = reactive([
	{
		icon: beverageOrder,
		text: '饮品订单',
		click: () => {
			uni.navigateTo({
				url: '/pages/drinkOrder/drinkOrder'
			});
		}
	},
	// {
	// 	icon: groupPurchaseOrder,
	// 	text: '团购订单'
	// },
	{
		icon: mallOrder,
		text: '商城订单',
		click: () => {
			uni.navigateTo({
				url: '/pages/shopOrder/shopOrder'
			});
		}
	}
]);
const moreServices = reactive([
	{
		icon: receivingHall,
		open_type: '',
		text: '接单大厅',
		click: () => {
			utils.showToast('敬请期待');
		}
	},
	{
		icon: distributionCenter,
		text: '分销中心',
		open_type: '',
		click: () => {
			uni.navigateTo({
				url: '/pages/distribution/distribution'
			});
		}
	},
	{
		icon: couponCollectionCenter,
		text: '领券中心',
		open_type: '',
		click: () => {
			uni.navigateTo({
				url: '/pages/couponCollectionCenter/couponCollectionCenter'
			});
		}
	},
	{
		icon: onlineCustomerService,
		open_type: 'contact',
		text: '在线客服'
	}
]);
const toSetting = () => {
	uni.navigateTo({
		url: '/pages/setting/setting'
	});
};
const toMessage = () => {
	uni.navigateTo({
		url: '/pages/message/message'
	});
};
const toCoupon = () => {
	uni.navigateTo({
		url: '/pages/coupon/coupon'
	});
};
const toCollect = () => {
	uni.navigateTo({
		url: '/pages/collect/collect'
	});
};
const toMember = () => {
	uni.navigateTo({
		url: '/pages/member/member'
	});
};
</script>

<style scoped lang="scss">
.gradation {
	background: linear-gradient(270deg, #f2e6bc 0%, #fff5d2 100%);
}
.equity {
	@apply text-[24rpx] border border-[#000] rounded-full px-[20rpx] py-[8rpx];
}
</style>